<script>
import {Collection, Cpu, DocumentChecked, Lollipop} from "@element-plus/icons-vue";

export default {
  components: {Lollipop, Cpu, Collection, DocumentChecked},
  data() {
    return {}
  },
  methods: {}
}
</script>

<template>
  <div class="tab-container">
    <el-tabs @tab-click="(pane) => this.$router.push(pane.paneName)">
      <el-tab-pane name="/project">
        <template #label>
          <span class="fs-17 color-#757575"><el-icon><Collection /></el-icon>知识库列表</span>
        </template>
      </el-tab-pane>
      <!-- <el-tab-pane name="/apiTest">
        <template #label>
          <span class="fs-17 color-#757575"><el-icon><Cpu /></el-icon>接口测试</span>
        </template>
      </el-tab-pane> -->
      <!-- <el-tab-pane name="/mock">
        <template #label>
          <span class="fs-17 color-#757575"><el-icon><Lollipop /></el-icon>Mock</span>
        </template>
      </el-tab-pane> -->
      <!-- <el-tab-pane name="/sampleTest">
        <template #label>
          <span class="fs-17 color-#757575"><el-icon><DocumentChecked /></el-icon>用例测试</span>
        </template>
      </el-tab-pane> -->
    </el-tabs>
    <div class="main-content">
      <router-view/>
    </div>
  </div>
</template>

<style scoped>
.tab-container {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 100%;
  margin-top: 2%;
}

.main-content {
  width: 96%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  margin-top: 1%;
}
</style>